<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>缴费</title>
    <link href="res/style.css" rel="stylesheet">
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app" class="flex">
    <<main>
        <header class="flex">
            <div>
                <h3>源辰银行</h3>
                <small>ycinfo bank</small>
            </div>
            <div id="contact">
                <div>客服电话: 8888</div>
                <div>网址: www.ycinfo.bank.com</div>
            </div>
        </header>
        <div class="msg">
            倒计时: <h2>32</h2> 秒
        </div>
        <div id="pane" class="flex">
            <div class="btns">
                <a class="hidden">占位</a>
                <a class="hidden">占位</a>
                <a class="hidden">占位</a>
            </div>
            <div id="info">
                <h2>缴费服务</h2>
                <form action="main.html">
                    <select placeholder="缴费类型" v-model="type">
                        <option value="水费">水费</option>
                        <option value="电费">电费</option>
                        <option value="电视费">电视费</option>
                        <option value="宽带费">宽带费</option>
                        <option value="煤气费">煤气费</option>
                    </select>
                    <input placeholder="缴费账号" type="number" v-model="account">
                    <input placeholder="缴费金额" type="number" v-model="money">
                </form>
            </div>
            <div class="btns">
                <a class="hidden">占位</a>
                <a class="hidden">占位</a>
                <a class="right" @click="pay">确定</a>
                <a href="main.html" class="right">返回</a>
            </div>
        </div>
    </main>>
</div>
</body>
</html>

<script>
    new Vue({
        el: "#app",
        data: {
            type: "",
            account: 0,
            money: 0
        },
        methods: {
            pay() {
                let params = new URLSearchParams()
                params.append("type", this.type)
                params.append("account", this.account)
                params.append("money", this.money)
                axios.post("bank/pay", params).then(res => {
                    if (res.data.code === 200) {
                        alert("缴费成功")
                        this.type = ""
                        this.account = 0
                        this.money = 0
                        setTimeout(() => {
                            location.href = "main.html";
                        }, 1000)
                    } else {
                        alert("缴费失败")
                    }
                })
            }
        }
    })
</script>
